<template>
	<view>
		<swiper class="swiper" 
		:vertical="vertical" 
		:autoplay="autoplay" 
		:interval="interval" 
		:duration="duration"
		:circular='circular'
		>
			<swiper-item>
				<view class="one swiper-item uni-bg-red">A</view>
			</swiper-item>
			<swiper-item>
				<view class="two swiper-item uni-bg-green">B</view>
			</swiper-item>
			<swiper-item>
				<view class="three swiper-item uni-bg-blue">C</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	
export default {
  data() {
         return {
             indicatorDots: false,
             autoplay: true,
             interval: 2000,
             duration: 500,
			 vertical:true,
			 circular:true
         }
     },
     methods: {
         // changeIndicatorDots(e) {
         //     this.indicatorDots = !this.indicatorDots
         // },
         // changeAutoplay(e) {
         //     this.autoplay = !this.autoplay
         // },
         // intervalChange(e) {
         //     this.interval = e.target.value
         // },
         // durationChange(e) {
         //     this.duration = e.target.value
         // }
     }
}

</script>	

<style lang="scss">
	.swiper {
		background:#ccc;
		&,.swiper-item{
			height:30px;
		}
		.one {
			background-color: green;
		}
		.two {
			background-color: yellow;
		}
		.three {
			background-color: blue;
		}
	}
</style>